<template>
  <view class="mvBox">
    <view class="choice appFlex-one">
      <text :class="current == 0 ? 'activeText' : ''" @click="activeI(0)"
        >韩国</text
      >|
      <text :class="current == 1 ? 'activeText' : ''" @click="activeI(1)"
        >日本</text
      >|
      <text :class="current == 2 ? 'activeText' : ''" @click="activeI(2)"
        >欧美</text
      >|
      <text :class="current == 3 ? 'activeText' : ''" @click="activeI(3)"
        >中国</text
      >
    </view>
    <swiper class="swiper" :current="current" style="height: 3300rpx">
      <swiper-item>
        <view class="swiper-item1">
          <view> <MvList :MecommendS="Mecommend"></MvList></view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item2">
          <view> <MvList :MecommendS="Jpecommend"></MvList></view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item3">
          <view> <MvList :MecommendS="Ccommend"></MvList></view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item4">
          <view> <MvList :MecommendS="Zcommend"></MvList></view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import MvList from "../../components/MvList";
export default {
  components: {
    MvList,
  },
  data() {
    return {
      Mecommend: [], //韩国
      Jpecommend: [], //日本
      Ccommend: [], //欧美
      Zcommend: [], //中国
      current: 2,
    };
  },
  onLoad() {
    this.getRecommendData(); //韩国mv
    this.getJpcommendData(); //日本mv
    this.getCcommendData(); //欧美mv
    this.getZcommendData(); //中国mv
  },
  methods: {
    // 改变current的值
    activeI(index) {
      this.current = index;
    },
    //获取韩国视频数据
    getRecommendData() {
      this.request("/mv/all", "GET", {
        limit: 20,
        area: "韩国",
        offset: 1,
      }).then((res) => {
        this.Mecommend = res.data;
      });
    },
    //获取日本视频数据
    getJpcommendData() {
      this.request("/mv/all", "GET", {
        limit: 20,
        area: "日本",
        offset: 1,
      }).then((res) => {
        this.Jpecommend = res.data;
      });
    },
    //获取欧美视频数据
    getCcommendData() {
      this.request("/mv/all", "GET", {
        limit: 20,
        area: "欧美",
        offset: 1,
      }).then((res) => {
        this.Ccommend = res.data;
      });
    },
    //获取中国视频数据
    getZcommendData() {
      this.request("/mv/all", "GET", {
        limit: 20,
        area: "内地",
        offset: 1,
      }).then((res) => {
        this.Zcommend = res.data;
      });
    },
  },
};
</script>

<style lang="less">
.mvBox {
  width: 750rpx;
  .choice {
    width: 700rpx;
    margin: 0 auto;
    height: 60rpx;
    line-height: 60rpx;
    background: #f1f1f1;
    .text {
      margin: 0 30rpx;
      text-align: center;
    }
    .activeText {
      color: royalblue;
    }
  }
  .swiper {
    width: 700rpx;
    margin: 0 auto;
  }
}
</style>